<template>
  <div id="app">
    <div id="nav">
      <!-- 使用默认方法跳转 -->
      <!-- <router-link to="/" replace >Home</router-link> |
      <router-link to="/about" replace>About</router-link>|
      <router-link to="/goHome">芜湖</router-link> -->
      <!-- 使用方法跳转 -->
      <!-- <button @click="getHome">首页</button>
      <button @click="getAbout">介绍</button> -->
      <!-- 
        router-link 中的属性：
        ①："tag" 将link 渲染成指定的标签
       -->
      <router-link :to="'/user/'+userID" tag="li">i标签</router-link>
      <!-- 
        动态路由 
        用法：使用 v-bind 绑定 "to" 属性;
        -->
      <router-link to="/home">主页</router-link> |
      <router-link to="/about">描述</router-link> |
      <!-- <router-link :to="'/user/'+userID">用户</router-link> |
      <router-link :to="{path:'/profile',query:{name:'cn',height:'182'}}">档案</router-link>  -->
      <!-- 
        使用方法跳转
      -->
      <button @click="userClick()">用户</button> |
      <button @click="profileClick()">档案</button>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name:'App',
   data() {
    return {
      userID:'芜湖'
    }
  },
  methods:{
    getHome() {
      this.$router.push('/')
    },
    getAbout() {
      this.$router.push('/about')
    },
    userClick() {
      this.$router.push('/user/'+this.userID)
    },
    profileClick() {
      this.$router.push(
        {
          path:'/profile',
          query:{
            name:'cn',
            hright:'182'
          }
        }
      )
    }
  }
}
</script>

<style>
#app a.router-link-exact-active {
  color: #0785fd;
}
</style>
